<template>
  <div class="SelfNav flex2part">
    <div class="left flex2part">
      <router-link class="links"
                   to="/">
        <img src="~@/assets/imgs/public/logo.png"
             alt="logo">
      </router-link>
      <router-link class="tiltleImg"
                   v-if="findAuth('DWT010040,DWT010050,DWT010020,DWT020010,DWT020020,DWT020030,DWT010010,DWT030010,DWT020040')"
                   to="/DataBoard">
        <!-- <img class="dataTiltle"
             src="~@/assets/imgs/public/dataList.png"
             alt=""> -->
        <img class="dataTiltle"
             src="~@/assets/imgs/public/dataTitle.png"
             alt="">
        <span class="fs20 c-fff"> 数据看板</span>
      </router-link>
    </div>
    <ul class="right flex2part">
      <li class="flex2part mr20"
          @click="getCode('saler')"
          v-auth-id="'COM090010'">
        <i class="el-icon-menu mr5"></i>
        <span style="cursor: pointer;"
              class="c-fff">
          销售专属二维码
        </span>
      </li>
      <li class="flex2part mr20"
          @click="getCode('retailStore')"
          v-auth-id="'COM080010'">
        <i class="el-icon-menu mr5"></i>
        <span style="cursor: pointer;"
              class="c-fff">
          分销二维码
        </span>
      </li>
      <li class="flex2part">
        <img src="~@/assets/imgs/public/msg.png"
             alt="msg"
             class="mr10 h18 ">
        <router-link to="/MessageList"
                     class="c-fff">您有<i class="keynote">{{$store.state.message.unReadCount}}</i>条新消息
        </router-link>
      </li>
      <li class="flex2part">
        <img src="~@/assets/imgs/public/person.png"
             alt="person"
             class="ml15 mr10 h18">
        <span style="cursor: pointer;"
              class="c-fff"
              @click="isShowChangePwd = true">
          {{`[${$store.state.user.info.groupName}]${$store.state.user.info.name}`}}
        </span>
      </li>
      <!-- <li class="flex2part">
        <img src="~@/assets/imgs/public/help.png" alt="help" class="ml10 mr10">
        <router-link to="/" class="c-fff">帮助手册</router-link>
      </li> -->
      <li class="flex2part"
          @click="handleAjaxLoginOut">
        <img src="~@/assets/imgs/public/quit.png"
             alt=""
             class="w27 h25 ml15">
      </li>
    </ul>

    <SelfDialog :isShow="isShowChangePwd"
                size="m"
                titTxt="修改密码"
                @dialogConfirm="handleChangePwdConfirm"
                @dialogCancel="isShowChangePwd = false">
      <el-form ref="form"
               class="flexMultiWrap"
               :rules="rules"
               :model="formData">
        <FormItemCreator v-for="(item, index) in formList"
                         :key="index"
                         v-bind="item"
                         :val.sync="formData[item.prop]" />
      </el-form>
    </SelfDialog>
    <!-- 生成二维码 -->
    <SelfDialog :isShow="isShowCode"
                size="m"
                :titTxt="`${status!=='saler'?'分销二维码':'销售二维码'}`"
                @dialogConfirm="handleChangeCodeConfirm"
                @dialogCancel="dialogCancel">
      <div class="codeBox"
           v-if="code">
        <img class="imgCode"
             :src="$store.state.user.serverUrl + code"
             alt="">
      </div>
      <!-- <div v-else>
        <button type="button"
                class="btn-operate btn-style-main mr30"
                @click="creatCode">生成二维码</button>
      </div> -->
      <template slot="bodyAttach">
        <div class="codeBox mb20 mt50">
          <button v-if="status!=='saler'"
                  type="button"
                  v-auth-id="'COM080020'"
                  class="btn-operate btn-style-main mr30 w200"
                  @click="updateCode">更新/生成我的分销二维码</button>
          <button v-else
                  type="button"
                  v-auth-id="'COM090020'"
                  class="btn-operate btn-style-main mr30 w200"
                  @click="updateCode">更新/生成我的销售二维码</button>
        </div>
      </template>
    </SelfDialog>
  </div>
</template>

<script type="text/ecmascript-6">
import SelfDialog from '@/components/SelfDialog'

export default {
  components: { SelfDialog },
  data () {
    return {
      workerUrl: '',
      formData: {
        oldPwd: '',
        newPwd: '',
        newPwdRepeat: ''
      },

      isShowChangePwd: false,
      formList: [
        { label: '旧密码', formType: 'input', prop: 'oldPwd' },
        { label: '新密码', formType: 'input', prop: 'newPwd' },
        { label: '确认密码', formType: 'input', prop: 'newPwdRepeat' }
      ],
      rules: {
        oldPwd: [{ required: true, message: '旧密码必填！' }],
        newPwd: [{ required: true, message: '新密码必填！' }],
        newPwdRepeat: [{ required: true, message: '确认密码必填！' }]
      },
      code: '',
      isShowCode: false,
      status: ''
    }
  },
  methods: {
    findAuth (authId) {
      let authObj = this.$store.state.auth.authObj
      let authArr = authId.split(',')
      return authArr.some(item => {
        let level1 = item.slice(0, 3)
        let level2 = item.slice(0, 6)
        let level3 = item
        return authObj[level1] || authObj[level2] || authObj[level3]
      })
    },
    dialogCancel () {
      this.isShowCode = false
      this.code = ''
    },
    creatCode () {

    },
    updateCode () {
      let url = this.status !== 'saler' ? '/api/manager/distribution/code/create' : '/api/manager/distribution/saleCode/create'
      this.$axios.get(url)
        .then(res => {
          if (res.data.meta.success) {
            this.$message.success('更新二维码成功！')
            this.getCode(this.status)
          }
        })
    },
    getCode (status) {
      this.status = status
      let url = status !== 'saler' ? '/api/manager/distribution/code' : '/api/manager/distribution/saleCode'
      this.isShowCode = true
      this.$axios.get(url)
        .then(res => {
          if (res.data.meta.success) {
            this.code = res.data.data
          }
        })
    },
    handleChangePwdConfirm () {
      this.$refs.form.validate((valid, errMsg) => {
        if (valid) {
          if (this.formData.newPwd !== this.formData.newPwdRepeat) {
            return this.$message.error('两次输入的新密码不一致！')
          }
          if (this.formData.newPwd === this.formData.oldPwd) {
            return this.$message.error('新旧密码不能一致！')
          }
          let postData = {
            oldPassword: this.formData.oldPwd,
            newPassword: this.formData.newPwd
          }
          this.$axios.post(`/api/common/login/update/password`, postData)
            .then(res => {
              if (res.data.meta.success) {
                this.$message.success('密码修改成功！')

                // localStorage.removeItem('token')
                // setTimeout(() => {
                //   this.$router.push('/login')
                //   localStorage.clear()
                //   sessionStorage.removeItem('user')
                //   this.$nextTick(() => {
                //     location.reload() // 动态添加过的路由无法删除，所以要自己手动刷新页面
                //   })
                // }, 1e3)
              }
            })
        } else {
          this.$message.error(Object.entries(errMsg)[0][1][0].message)
        }
      })
    },
    handleAjaxLoginOut () {
      this.$axios.get('/api/common/login/logout')
        .then(res => {
          if (res.data.meta.success) {
            this.$message.success('登出操作成功！即将跳转回登陆界面')

            localStorage.removeItem('token')
            setTimeout(() => {
              this.$router.push('/login')
              localStorage.clear()
              sessionStorage.removeItem('user')
              this.$nextTick(() => {
                location.reload() // 动态添加过的路由无法删除，所以要自己手动刷新页面
              })
            }, 1e3)
          }
        })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
@import "~@/assets/css/public.scss";
.codeBox {
  width: 100%;
  text-align: center;
}
.imgCode {
  width: 70%;
  border: 1px solid #eee;
}
.flex2part {
  font-size: 16px;
  img {
    margin-top: auto;
  }
}
.SelfNav {
  height: 60px;
  padding: 0 25px 0 30px;
  background-color: #{$c-subsidiary};
}

.links {
  display: block;
}

.left {
  .txt-box {
    .line1 {
      color: #{$c-title};
    }
    .line2 {
      color: #fff;
    }
  }
}

.right {
  color: #fff;
}
.w200 {
  width: 200px;
}
.dataTiltle {
  margin-right: 10px;
  height: 25px;
}
.tiltleImg {
  margin-left: 30px;
  display: flex;
  align-items: center;
}
</style>
